<template>
<Modal 
  :title="lang.title" v-model="drawer.show"
  :width="width"
  :closable="false"
  :mask-closable="false"
  @on-ok="ok"
>
  <Tabs v-if="drawer.show" v-model="curTab" :animated="false">
    <TabPane :label="lang.baseInfo" name="base">
      <Form :labelWidth="120" :model="formData">
        <FormItem prop="refModel" :label="lang.workCenter">
          <cfgWorkCenterPointer v-model="formData.link" />
        </FormItem>
      </Form>
      <Alert style="margin: 0">{{ $t(`model.modelProperties`) }}</Alert>
      <cfgModelPropertyNoGroup ref="_features" v-model="formData.properties"/>
      <!-- <Alert style="margin: 0">{{ $t(`model.modelStatusProperties`) }}</Alert>
      <cfg-modelStatusProperty v-model="formData.statusProperties" /> -->
    </TabPane>
    <TabPane :label="lang.nodeConfig" name="property">
    <Form ref="_form" :labelWidth="120" :model="formData">
      <FieldItem v-model="formData.name"
        :config="{ type: 'text', clearable: true, disabled: formData.name==='root' }"
        :formItemProps="{ label: lang.name }"/>
    </Form>
    <Form ref="_form" :labelWidth="120" :model="properties">
      <FormItem :label="lang.nodeTitleColor">
        <ColorPicker v-model="properties.nodeTitleColor" transfer transfer-class-name="colorTransferwp"
          recommend :disabled="formData.name==='root'" />
      </FormItem>
      <FormItem :label="lang.nodeBgColor">
        <ColorPicker v-model="properties.nodeBgColor" transfer transfer-class-name="colorTransferwp"
          recommend :disabled="formData.name==='root'" />
      </FormItem>
    </Form>
    </TabPane>
  </Tabs>
</Modal>
</template>

<script>
export default {
  name: "routingConfigPanel",
  data(){
    return {
      curTab: 'base',
    }
  },
  mounted() {
  },
  watch: {
    'drawer.show'(val) {
      if (val) {
      }
    },
  },
  methods:{
    ok() {
      // let data = {...this.formData}
      // let refModel = this.formData.refModel
      // data.properties = this.$refs._features.getValues() || [];

      // if (refModel && Object.keys(refModel).length) {
      //   data.linkTable = refModel.type
      //   data.linkClass = refModel.className
      // } else {
      //   data.linkTable = ''
      //   data.linkClass = ''
      // }
      this.curTab = 'base'
      this.$emit('ok', this.properties)
    },
  },
  computed:{
    formData() {
      let res = this.curIndex === -1 || !this.hierObject ? {} : this.hierObject.hierProperties.content[this.curIndex]
      console.log("file: routingConfigPanel.vue:79  formData  res:", res)
      return res
    },
    lang(){
      return {
        "en-US": {
          baseInfo: 'baseInfo',
          nodeConfig: 'node Config',
          title:'routing config',
          curWorkCenter:'current workCenter',
          workCenter:'workCenter',
          name: 'node name',
          nodeTitleColor: 'node title color',
          nodeBgColor: 'node background color',
          type: 'type',
          className: 'class name',
          comments: 'comments',
          modelProperties: 'basic properties config',
          modelStatusProperties: 'status properties config',
        },
        "zh-CN": {
          baseInfo: '基本信息',
          nodeConfig: '节点配置',
          title:'工艺路线配置',
          curWorkCenter:'当前工作中心',
          workCenter:'工作中心',
          name: '节点名称',
          nodeTitleColor: '节点标题颜色',
          nodeBgColor: '节点背景颜色',
          type: '所属类型',
          className: '模型类名',
          comments: '说明',
          modelProperties: '基本属性配置',
          modelStatusProperties: '状态属性配置',
        },
      }[this.G_Locale];
    }
  },
  props:{
    drawer:{
      default(){
        return {
          show: false
        };
      }
    },
    hierObject:{
      default(){
        return {};
      }
    },
    curIndex:{
      default(){
        return -1;
      }
    },
    // 节点的其它配置信息，如 nodeTitleColor nodeBgColor
    properties:{
      default(){
        return -1;
      }
    },
    width:{
      default(){
        return 800;
      }
    },
  },
}
</script>

<style lang="less">
  .colorTransferwp {
    width: 300px;
  }
</style>